<template>
  <div class="overview">
      <div class="left">
          <PieChart :rowdata="pierowdata"></PieChart>
      </div>
      <div class="right">
        <wordCloud :rowdata="pierowdata"></wordCloud>
      </div>
      <div class="bottom">
        <Heatmap :rowdata="heatrowdata"></Heatmap>
      </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import PieChart from './charts/piechart.vue'
import Heatmap from './charts/heatmap.vue'
import wordCloud from './charts/wordCloud.vue'
export default defineComponent({
name: 'overview',
components: { PieChart,Heatmap,wordCloud},
setup() {
  const pierowdata = [
    { value: 1048, name: '10.15.*.*' },
    { value: 735, name: '172.21.*.*' },
    { value: 580, name: '10.13.*.*'},
    { value: 580, name: '172.30.*.*' },
    { value: 484, name: 'Union Ads' },
    { value: 300, name: 'Video Ads' },
    { value: 1048, name: 'Search Engine' },
    { value: 735, name: '10.13.*.*' },
    { value: 580, name: '172.32.*.*' },
    { value: 484, name: '192.50.*.*' },
    { value: 300, name: '192.10.*.*' },
    { value: 1048, name: 'Engine' },
    { value: 735, name: '152.20.*.*q' },
    { value: 580, name: '172.40.*.*' },
    { value: 484, name: '172.30.*.*' },
    { value: 300, name: '192.23.*.*' },
    { value: 580, name: '10.13.*。*' },
    { value: 484, name: '10.13.*.*' },
    { value: 300, name: '192.10.*.*' },
    { value: 1048, name: '182.10.*.*' },
    { value: 735, name: '172.21.*.*' },
    { value: 580, name: '10.16.*.*' },
    { value: 484, name: '10.21.*.*' },
    { value: 300, name: '10.13.*.*' },
  ]
  return { pierowdata }
},
})
</script>
<style scoped lang=less>
.overview {
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-wrap: wrap;

  .left {
      width: 50%;
      height: 500px;
      //background: pink;
  }

  .right {
      width: 50%;
      height: 500px;
      //background: green;
  }

  .bottom {
      width: 100%;
      height: 400px;
      //background: yellow;
  }
}
</style>